<template>
  <div>
    <div class="add">
      <input type="text" v-model="item" />
      <button @click="btnAdd">添加</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      item: "",
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    btnAdd() {
      // 一点击添加触发该事件
      // 目的 收集item的值，将item传递给父级APP 触发$emit
      console.log(this.item);
      this.item = this.item.trim();
      //   如果是空格，不进行添加操作
      /* if (this.item == "") {
        return;
      } */
      if (!this.item) {
        return;
      }
      //   ctrl+p 快速搜索组件
      this.$emit("addItem", this.item);
      //收集完数据清空input框
      this.item = "";
    },
  },

  watch: {},
};
</script>
<style lang='css' scoped>
.add {
  height: 50px;
  /* border: 1px solid black; */
  display: flex;
  justify-content: center;
}
</style>